<html>

	<head>
		<meta charset="utf-8">
		<meta name="referrer" content="never">
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- jquery -->
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<!-- mui -->
		<link rel="stylesheet" href="css/mui.min.css">
		<script type="text/javascript" src="js/mui.min.js"></script>
		<!-- Bootstrap -->
		<link rel="stylesheet" href="css/bootstrap.css" />
		<script type="text/javascript" src="js/bootstrap.js"></script>
		<link rel="stylesheet" href="css/style.css" />
		<link rel="stylesheet" href="css/templatemo-style.css">
	</head>

	<body>
		<div id="loader-wrapper">
			<div id="loader"></div>
		</div>
		<!-- 侧滑菜单 -->
		<div id="wrapper">
			<!-- Sidebar -->
			<nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation">
				<ul class="nav sidebar-nav">
					<li class="sidebar-brand">
						<a href="#">此处应该有图</a>
					</li>
					<li>
						<a href="#"><i class="fa fa-fw fa-home"></i> Home</a>
					</li>
					<li>
						<a href="#"><i class="fa fa-fw fa-folder"></i>哔哩哔哩</a>
					</li>
					<li>
						<a href="#"><i class="fa fa-fw fa-file-o"></i>安卓壁纸</a>
					</li>
					<li>
						<a href="#"><i class="fa fa-fw fa-cog"></i>淘宝</a>
					</li>
					<!--<li class="dropdown">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-fw fa-plus"></i> Dropdown <span class="caret"></span></a>
						<ul class="dropdown-menu" role="menu">
							<li class="dropdown-header">Dropdown heading</li>
							<li>
								<a href="#">Action</a>
							</li>
							<li>
								<a href="#">Another action</a>
							</li>
							<li>
								<a href="#">Something else here</a>
							</li>
							<li>
								<a href="#">Separated link</a>
							</li>
							<li>
								<a href="#">One more separated link</a>
							</li>
						</ul>
					</li>-->

				</ul>
			</nav>

			<!-- Page Content -->
			<div>
				<button type="button" class="btn-sm hamburger is-closed animated fadeInLeft" data-toggle="offcanvas">  
		            <span class="hamb-top"></span>  
		            <span class="hamb-middle"></span>  
		            <span class="hamb-bottom"></span>  
          		</button>
			</div>
		</div>
		<!--//////////////////////////////-->
		<div class="content-bg"></div>
		<!--背景-->
		<!-- /#page-content-wrapper -->
		<div class="mui-inner-wrap">
			<header id="header" class="mui-bar mui-bar-nav">
				<h1>
				<a href="test.html" title="Chii" class="mui-title">
					<img src="images/logo.png" alt="Chii"/>
				</a>
			</h1>
			</header>
		</div>
		<div id="pullrefresh" class="infinite main-posts ">
			<div class="container mui-scroll">
				<div class="row">
					<ul class="blog-masonry masonry-true">
						<!--<li class="post-masonry col-md-4 col-sm-6">
							<div class="post-thumb">
								<img src="images/gallery/01.jpg" alt="">
								<div class="title-over">
									<h4><a href="#">Title one goes here</a></h4>
								</div>
								<div class="post-hover text-center">
									<div class="inside">
										<i class="fa fa-plus"></i>
										<span class="date">25 Jan 2084</span>
										<h4><a href="#">Title one goes here</a></h4>
										<p>Cum sociis natoque penatibus et magnis dis parturient</p>
									</div>
								</div>
							</div>
						</li>-->

						<!-- /.post-masonry -->

					</ul>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			var pages = 0;
			var sizes = 5;
			var count = 0;
			$(window).load(function() { // makes sure the whole site is loaded
				$('#loader').fadeOut(); // will first fade out the loading animation
				$('#loader-wrapper').delay(500).fadeOut('slow'); // will fade out the white DIV that covers the website.
				$('body').delay(500).css({
					'overflow-y': 'visible'
				});
			})
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',

					up: {
						auto: true,
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});

			function pullupRefresh() {
				setTimeout(function() {
					mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 99)); //参数为true代表没有更多数据了。
					pages = pages + 1;
					//					alert(pages)
					ajax();
				}, 1000);
			}
			$(document).ready(function()  {    
				var  trigger  =  $('.hamburger'),
					        overlay  =  $('.overlay'),
					        isClosed  =  false;    
				trigger.click(function()  {        
					hamburger_cross();    
				});    
				function  hamburger_cross()  {        
					if (isClosed  ==  true)  {            
						overlay.hide();            
						trigger.removeClass('is-open');            
						trigger.addClass('is-closed');            
						isClosed  =  false;        
					} 
					else  {            
						overlay.show();            
						trigger.removeClass('is-closed');            
						trigger.addClass('is-open');            
						isClosed  =  true;        
					}    
				}    
				$('[data-toggle="offcanvas"]').click(function()  {        
					$('#wrapper').toggleClass('toggled');    
				});
			});
			var ajax = function() {
				//利用RunJS的Echo Ajax功能测试
				var url = "http://139.199.11.57:8080/mysql.jsp";
				//发送数据（可有可无）
				var data = {
					top: pages * sizes,
					end: (pages + 1) * sizes
				};
				$.getJSON(url, data, success);
			};
			var success = function(response) {
				//response = JSON.stringify(response);
				addData(response);
			};
			$(function($) {
				//设置全局beforeSend
				$.ajaxSettings.beforeSend = function(xhr, setting) {
					//beforeSend演示,也可在$.ajax({beforeSend:function(){}})中设置单个Ajax的beforeSend
					console.log('beforeSend:::' + JSON.stringify(setting));
				};
				//设置全局complete
				$.ajaxSettings.complete = function(xhr, status) {
					console.log('complete:::' + status);
				}
				ajax();
			})

			function addData(jsonObject) {
				var table = document.body.querySelector(".blog-masonry");
				var object = jsonObject.comments;
				var strHtml = "";
				for(var i = 0; i < object.length; i++) {
					var li = document.createElement('li');
					var aname = object[i].name;
					li.className = 'post-masonry col-md-4 col-sm-6';
					strHtml += '<div class="post-thumb">'
					strHtml += '<img src="' + object[i].link + '" alt="" />';
					strHtml += '<div class="title-over"><h4><a href="#">' + object[i].title + '</a></h4></div>';
					strHtml += '<div class="post-hover text-center"><div class="inside"><i class="fa fa-plus"></i>';
					strHtml += '<span class="date">' + object[i].type + '</span>';
					strHtml += '<h4><a href="#">作者:' + object[i].author + '</a></h4>'
					strHtml += '<p>' + object[i].tag + '</p>'
					strHtml += '</div></div></div>';
					//					console.log(strHtml);
					li.innerHTML = strHtml;
					//下拉刷新，新纪录插到最前面；
					//					table.insertBefore(li, table.firstChild);
					table.appendChild(li, table.lastChild);
					strHtml = "";
				}
			}
		</script>
	</body>

</html>